<template>
    <div class="homePlaceContent">
        <van-search
            v-model="phoneNumber"
            @keyup.enter="searchPhoneNumber"
            shape="round"
            maxlength="11"
            background=""
            placeholder="请输入手机号码进行查询"
            v-if="!isIdOrPhone"
        />
        <div class="homePlaceBtn" v-if="!isIdOrPhone">
            <van-button
                style="width: 100%;background: #15256a;color: #FFF;border-radius: 16px;border: none; transition: all 0.3s ease;"
                :class="{ active: isActive}"
                @click="searchPhoneNumber"
            >
                {{ numList ? '重新开始' : '开始查询' }}
            </van-button>
        </div>
        <van-search
            v-model="idNumber"
            @keyup.enter="searchIdNumber"
            shape="round"
            maxlength="18"
            background=""
            placeholder="请输入身份证号码进行查询"
            v-if="isIdOrPhone"
        />
        <div class="homePlaceBtn" v-if="isIdOrPhone">
            <van-button
                style="width: 100%;background: #15256a;color: #FFF;border-radius: 16px;border: none; transition: all 0.3s ease;"
                :class="{ active: isActive}"
                @click="searchIdNumber"
            >
                {{ numList ? '重新开始' : '开始查询' }}
            </van-button>
        </div>
        <screenMap class="screenMap" v-if="!numList"></screenMap>
        <div class="homePlaceInfo" v-else-if="numList && !isIdOrPhone">
            <div class="homePlaceInfoText">
                <p>手机号归属地区号：<span>{{ numList?.areaCode || '--' }}</span></p>
                <p>手机号运营商：<span>{{ numList?.name || '--' }}</span></p>
                <p>手机号归属地省份：<span>{{ numList?.prov || '--' }}</span></p>
                <p>手机号归属地省编码：<span>{{ numList?.provCode || '--' }}</span></p>
                <p>手机号归属地城市：<span>{{ numList?.city || '--' }}</span></p>
                <p>手机号归属地城市编码：<span>{{ numList?.cityCode || '--' }}</span></p>
                <p>手机号归属地邮编：<span>{{ numList?.postCode || '--' }}</span></p>
            </div>
        </div>
        <div class="homePlaceInfo" v-if="numList && isIdOrPhone">
            <div class="homePlaceInfoText">
                <p v-if="numList?.sex">性别：<span>{{ numList?.sex == 'M' ? '男性' : '女性' }}</span></p>
                <p>籍贯：<span>{{ numList?.address || '--' }}</span></p>
                <p>生日：<span>{{ numList?.birthday || '--' }}</span></p>
            </div>
        </div>
        <van-overlay :show="checkShow">
            <div class="wrapper">
                <div class="wrapperTitle">
                    <p>请选择您要查询的归属地类型：</p>
                </div>
                <div class="wrapperBox">
                    <div class="wrapperBoxItem" :class="{ 'wrapperBoxItemActive': !isCheck }" @click="checkType(false)">
                        <SvgIcon width="60px" height="60px" name="phoneHomePlace" color="#f5c3cb"></SvgIcon>
                        <p>手机号</p>
                    </div>
                    <div class="wrapperBoxItem" :class="{ 'wrapperBoxItemActive': isCheck }" @click="checkType(true)">
                        <SvgIcon width="60px" height="60px" name="idHomePlace" color="#f5c3cb"></SvgIcon>
                        <p>身份证号</p>
                    </div>
                </div>
                <div class="wrapperBtn">
                    <van-button
                        style="width: 100%;background: #15256a;color: #FFF;border-radius: 16px;border: none; transition: all 0.3s ease;"
                        @click="beginSearch"
                    >
                        {{ '确认' }}
                    </van-button>
                </div>
            </div>
        </van-overlay>
    </div>
</template>
    
<script setup lang="ts">
import { ref, onMounted, computed, onUnmounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { showToast, showFailToast } from 'vant'
import request from '@/utils/request'
import useSettingStore from '@/store/modules/setting'
const settings = useSettingStore()


const route = useRoute()
const router = useRouter()

const checkShow = ref<boolean>(true)
const isIdOrPhone = ref<boolean>(false) // 是否是身份证号码 true为身份证号码，false为手机号码
const phoneNumber = ref<any>('')
const idNumber = ref<any>('')
const numList = ref<any>(null)
const isActive = ref<boolean>(false)
const isCheck = ref<boolean>(false)
const chinaPhoneNumberRegex = /^1[3-9]\d{9}$/

const handleClick = () => {
    isActive.value = !isActive.value
    setTimeout(() => {
        isActive.value = !isActive.value
    }, 100)
}

const checkType = (type: boolean) => {
    if (type == isCheck.value) {
        return
    }
    isCheck.value = !isCheck.value
    isIdOrPhone.value = type
}

const beginSearch = () => {
    checkShow.value = false
    // if () {
    //     isIdOrPhone.value = false
    // } else {
    //     isIdOrPhone.value = true
    // }
}

const reqPhoneHomePlaceInfo = (data: any) => request.post<any, any>(`https://route.showapi.com/6-1?showapi_appid=1783553&showapi_sign=40ebc3ff09fd4a08979bfc421db31f7d&num=${phoneNumber.value}`, data)
const reqIdHomePlaceInfo = (data: any) => request.post<any, any>(`https://route.showapi.com/25-3?showapi_appid=1783553&showapi_sign=40ebc3ff09fd4a08979bfc421db31f7d&id=${idNumber.value}`, data)

const searchPhoneNumber = () => {
    handleClick()
    if (numList.value && numList.value != '') {
        phoneNumber.value = ''
        numList.value = null
        checkShow.value = true
        return
    }
    if (!phoneNumber.value || phoneNumber.value == '') {
        showToast('请输入手机号码')
        return
    }
    if (!chinaPhoneNumberRegex.test(phoneNumber.value)) {
        showFailToast('请输入正确的手机号码')
        phoneNumber.value = ''
        return
    }
    settings.handlerLoadingShow(true)
    reqPhoneHomePlaceInfo({
        // showapi_appid: '1505398', //这里需要改成自己的appid
        // showapi_sign: '38a5f6fb1abe4355bc2f0d5435372138',  //这里需要改成自己的应用的密钥secret
        num: phoneNumber.value
    }).then(res => {
        settings.handlerLoadingShow(false)
        console.log('res', res)
        if (res.showapi_res_code == 0 || res.showapi_res_body?.ret_code == 0) {
            numList.value = res.showapi_res_body
        } else {
            showFailToast(res.showapi_res_body.remark || '请求失败')
        }
    })
}

const searchIdNumber = () => {
    handleClick()
    // 15位身份证正则表达式
    const reg15 = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/;
    // 18位身份证正则表达式
    const reg18 = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}(\d|X|x)$/;
    if (numList.value && numList.value != '') {
        phoneNumber.value = ''
        numList.value = null
        return
    }
    if (!idNumber.value || idNumber.value == '') {
        showToast('请输入身份证号码')
        return
    }
    // if (!reg18.test(idNumber.value) || !reg15.test(idNumber.value)) {
    if (!reg18.test(idNumber.value)) {
            showFailToast('请输入正确的身份证号码')
        idNumber.value = ''
        return
    }
    settings.handlerLoadingShow(true)
    reqIdHomePlaceInfo({
        // showapi_appid: '1505398', //这里需要改成自己的appid
        // showapi_sign: '38a5f6fb1abe4355bc2f0d5435372138',  //这里需要改成自己的应用的密钥secret
        id: idNumber.value
    }).then(res => {
        settings.handlerLoadingShow(false)
        console.log('res', res)
        if (res.showapi_res_code == 0 || res.showapi_res_body?.ret_code == 0) {
            numList.value = res.showapi_res_body.retData
        } else {
            showFailToast(res.showapi_res_body.remark || '请求失败')
        }
    })
}

onMounted(() => {

})

</script>


<style lang="scss" scoped>
.homePlaceContent {
    width: 100%;
    position: relative;
    box-sizing: border-box;
    .homePlaceBtn {
        padding: 15px;
        margin: 10px 0;
        .active {
            // background-color: blue; /* 改变背景颜色 */
            transform: scale(1.1); /* 放大按钮 */
        }
    }
    .screenMap {
        width: 100%;
        height: auto;
        padding: 0 5px;
        aspect-ratio: 1 / 1;
        margin: 80px 0;
        overflow: hidden;
    }
    .homePlaceInfo {
        width: 100%;
        height: auto;
        // min-height: 50vh;
        .homePlaceInfoText {
            padding: 15px;
            p {
                margin: 35px 0;
                font-size: 14px;
                text-align: center;
            }
            span {
                color: #bca1f3;
                font-size: 16px;
                font-weight: 700;
            }
        }
    }
    .wrapper {
        width: 100%;
        height: auto;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 15px;
        .wrapperTitle {
            width: 100%;
            height: auto;
            margin-bottom: 60px;
            p {
                color: #FFFFFF;
                text-align: center;
                font-weight: 500;
                font-size: 20px;
            }
        }
        .wrapperBox {
            width: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            .wrapperBoxItem {
                width: 100%;
                height: auto;
                aspect-ratio: 1 / 1;
                margin-right: 25px;
                // background-color: black;
                border-radius: 16px;
                border: none;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                p {
                    color: #FFFFFF;
                    margin-top: 25px;
                    font-weight: 700;
                    font-size: 18px;
                }
            }
            :last-child {
                margin-right: 0px;
            }
            .wrapperBoxItemActive {
                // background-color: blue; /* 改变背景颜色 */
                transform: scale(1.1); /* 放大按钮 */
                // border: #bca1f3 5px solid;
                border: #FFFFFF 5px solid;
            }
        }
        .wrapperBtn {
            width: 100%;
            margin-top: 60px;
        }
    }
}
</style>